<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!--   搜索     -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" @click="addTestRun">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refreshTestRunList">刷新</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchTestRun">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table
            ref="multipleTableRef"
            :data="testRunList.list"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column label="Date" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="Name" width="120"/>
          <el-table-column property="address" label="Address"/>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>


<script setup lang="ts">

import {showMsg, ShowType} from "@/plugin/message.ts";
import {reactive, ref} from "vue";
import {InitTestRunList} from "@/type/test_run.ts";


const testRunList = reactive(new InitTestRunList())
// ==========================================工具栏=======================================
// 添加TestRun
const addTestRun = () => {
  showMsg(ShowType.info, 'addTestRun')
}

// 刷新TestRun
const refreshTestRunList = () => {
  showMsg(ShowType.info, 'refreshTestRunList')
}

// 搜索TestRun
const searchTestRun = () => {
  showMsg(ShowType.info, 'searchTestRun')
}


testRunList.list = [
  {
    id: 1,
    name: 'test1',

    date: '2022-01-01'
  },
  {
    id: 2,
    name: 'test2',
    date: '2022-01-02'
  },
  {
    id: 3,
    name: 'test3',
    date: '2022-01-03'
  },
  {
    id: 4,
    name: 'test4',
  }
]


interface TestRunI {
  id: number;
  name: string;
  date: string;
}

// 已选择的TestRun
const selectedTestRuns = ref<TestRunI[]>([])
const handleSelectionChange = (val) => {
  selectedTestRuns.value = val
  console.log(selectedTestRuns.value)
}
</script>


<style scoped>

</style>